<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

 <title>Title</title>

</head>
<body >
    <!-- <video id="v1" autoplay loop muted>
        <source src="./first.mp4" type="video/mp4"  />
  </video> -->
    
  <div id="container">
    <video id="background_video" loop muted>抱歉，您的浏览器不支持内嵌视频</video>
    <!-- #video_cover 是默认的视频封面 -->
    <div id="video_cover"></div>
    <!-- #overlay 遮罩层 -->
    <div id="overlay"></div>
    <!-- #video_controls 用来控制视频静音、取消静音 -->
    <div id="video_controls">
      <span id="mute">
        <img src="blank.png">
      </span>
    </div>
    <!-- section 中添加任意你想展示的HTML内容 -->
    <section id="main_content">
    <div id="head">
      <h1>HTML5轻松实现全屏视频背景-Bideo.js</h1>
      <p class="sub_head">一个可以轻松添加页面全屏背景视频的Javscript库</p>
      <p class="info">(稍等片刻，视频加载需要一点点时间.)</p>
    </div>
  </section>
</div>


</body>
</html>